<!--
  -    Copyright (c) 2018-2025, hycloud All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: hycloud
  -->
<template>
    <div class="execution">
        <basic-container>
            <avue-crud ref="crud"
                       :page.sync="page"
                       :data="tableData"
                       :permission="permissionList"
                       :table-loading="tableLoading"
                       :option="tableOption"
                       @on-load="getList"
                       @search-change="searchChange"
                       @refresh-change="refreshChange"
                       @size-change="sizeChange"
                       @current-change="currentChange"
                       @row-update="handleUpdate"
                       @row-save="handleSave"
                       @row-del="rowDel">
                       <template slot="menuLeft" slot-scope="scope">
                            <el-button type="primary"
                            icon="el-icon-circle-plus"
                            size="small"
                            @click="openform(scope)">新增</el-button>
                        </template>
                        <template slot-scope="{ row }" slot="menu">
                            <el-button
                            icon="el-icon-position"
                            type="text"
                            @click="deviceshow(row)"
                            >设置项目</el-button
                            >
                        </template>
            </avue-crud>
        </basic-container>
        <el-dialog top="5vh" title="添加设备" v-if="modal" :visible.sync="modal" append-to-body>
        <avue-form
          ref="wcnjform"
          :option="wcnjoption"
          v-model="wcnjform"
          @submit="toaudit"
        >
          <template slot-scope="scope" slot="menuForm">
            <el-button icon="el-icon-close" @click="modal = false"
              >取消</el-button
            >
          </template>
          <template slot-scope="scope" slot="assetIds">
            <div class="prdiv">
                <div>巡检设备:</div>
                <avue-crud
                  ref="conscurd"
                  :option="itemOption"
                  :data="itemList || []"
                >
                  <template slot="menuLeft">
                    <el-button type="primary" size="small" @click="choseMember('asset')">添加</el-button>
                  </template>
                  <template
                    slot="menu"
                    slot-scope="{row}"
                  >
                    <el-button type="text" icon="el-icon-delete" @click="todelCbl(row)">删除</el-button>
                  </template>
                </avue-crud>
                <div class="divs">
                  <table class style="width:100%;">
                    <tbody class>
                      <tr>
                        <td colspan="1" rowspan="1" class style="width:15.7%">
                          <div class="cell"></div>
                        </td>
                        <td colspan="1" rowspan="1" class style="width:10.9%">
                          <div class="cell"></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
          </template>
        </avue-form>
        </el-dialog>
        <el-dialog
            :visible.sync="modal1"
            v-if="modal1"
            title="设置项目"
            width="1000px"
            :close-on-click-modal="false"
            append-to-body>
            <patrolasset-item :assetId="assetId"></patrolasset-item>
        </el-dialog>
        <choose-member v-if="showChose" :labelkey="labelkey" :url1="url1" :url2="url2" :title="title" :columns1="columns1" :columns="columns" :limitLabel="limitLabel" :flKey="flKey" :type="type"></choose-member>
    </div>
</template>

<script>
    import {fetchList, getObj, addObj, putObj, delObj} from '@/api/patrol/patrolasset'
    import {tableOption, wcnjoption, itemOption} from '@/const/crud/patrol/patrolasset'
     import eventBus from '@/util/eventBus'
     import patrolassetItem from '@/views/patrol/patrolassetitem/index'
    import chooseMember from '@/components/chooseMember'
    import {mapGetters} from 'vuex'

    export default {
        components: { chooseMember, patrolassetItem },
        name: 'patrolasset',
        data() {
            return {
                modal1: false,
                showChose: false,
                edom: '',
                url1: '',
                url2: '',
                type: 'checkbox',
                limitLabel:'',
                columns:[],
                columns1:[],
                title: '',
                flKey: '',
                labelkey: '',
                modal: false,
                assetId: '',
                wcnjform: {},
                wcnjoption: wcnjoption,
                itemOption: itemOption,
                searchForm: {},
                tableData: [],
                itemList: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                tableLoading: false,
                tableOption: tableOption
            }
        },
        computed: {
            ...mapGetters(['permissions']),
            permissionList() {
                return {
                    addBtn: false,
                    delBtn: this.vaildData(this.permissions.act_patrolasset_del, false),
                    editBtn: false
                };
            }
        },
        created() {
            this.eventBusHandle()
        },
        methods: {
            openform() {
                this.itemList = []
                this.wcnjform = {}
                this.modal = true
            },
            toaudit(form, done) {
                if (this.wcnjform.assetIds.length > 0) {
                    addObj(this.wcnjform).then(response => {
                        this.$message.success("提交成功")
                        this.modal = false
                        this.getList(this.page)
                    }).catch(() => {
                        done();
                    });
                } else {
                    this.$message.warning("请添加巡检设备");
                    done()
                }
            },
            deviceshow(row) {
                this.assetId = row.assetId
                this.modal1 = true
            },
            eventBusHandle () {
                let _this = this
                eventBus.$on('getMember', function (data) {
                    if(data.assetList_choose_member && data.assetList_choose_member.length) {
                        _this.itemList = data.assetList_choose_member
                        _this.wcnjform.assetIds = data.assetList
                    }
                })
            },
            choseMember (id) {
                this.labelkey = 'assetList_choose_member'
                this.showChose = true
                this.url1 = '/act/assetcategory/tree?status=1'
                this.url2 = '/act/asset/page'
                this.title = '资产类别'
                this.limitLabel = '添加资产'
                this.columns = [
                    {
                        title: '资产名',
                        dataIndex: 'name',
                        key: 'name',
                        width: 150
                    },
                    {
                        title: '规格',
                        key: 'spec',
                        width: 80,
                        dataIndex: 'no',
                    },
                    {
                        title: '单位',
                        key: 'unit',
                        width: 80,
                        dataIndex: 'unit',
                    },
                    {
                        title: '编号',
                        key: 'no',
                        width: 100,
                        dataIndex: 'no',
                    },
                    {
                        title: 'sn',
                        key: 'sn',
                        width: 80,
                        dataIndex: 'sn',
                    },
                    {
                        title: '品牌',
                        key: 'brand',
                        width: 80,
                        dataIndex: 'brand',
                    }
                ]
                this.flKey = 'categoryId'
                this.columns1 = [
                    {
                        title: '资产名',
                        dataIndex: 'name',
                        key: 'name' 
                    },
                    {
                        title: '操作',
                        key: 'action',
                        scopedSlots: { customRender: 'action' },
                    },
                ]
            },
            todelCbl(row){
                this.itemList.splice(this.itemList.findIndex((v, i) => i === row.$index), 1);
                this.wcnjform.assetIds = this.itemList.map(item => {
                    return item.assetId
                })
            },
            getList(page, params) {
                this.tableLoading = true
                fetchList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params, this.searchForm )).then(response => {
                    this.tableData = response.data.data.records
                    this.page.total = response.data.data.total
                    this.tableLoading = false
                }).catch(() => {
                    this.tableLoading=false
                })
            },
            rowDel: function (row, index) {
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    return delObj(row.assetId)
                }).then(data => {
                    this.$message.success('删除成功')
                    this.getList(this.page)
                })
            },
            handleUpdate: function (row, index, done,loading) {
                putObj(row).then(data => {
                    this.$message.success('修改成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            handleSave: function (row, done,loading) {
                addObj(row).then(data => {
                    this.$message.success('添加成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            sizeChange(pageSize){
                this.page.pageSize = pageSize
            },
            currentChange(current){
                this.page.currentPage = current
            },
            searchChange(form, done) {
                this.searchForm = form
                this.page.currentPage = 1
                this.getList(this.page, form)
                done()
            },
            refreshChange() {
                this.getList(this.page)
            }
        }
    }
</script>